<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="width: 300px">
      <el-breadcrumb-item style="font-size: 16px">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px">权限管理</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px">权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-table
      :data="rightsData"
      border
      style="
        width: 1001px;
        position: relative;
        margin-left:30px
        text-align: center;
      "
      :header-cell-style="headClass"
    >
      <el-table-column label="序号" width="100" type="index" align="center">
      </el-table-column>
      <el-table-column label="权限名称" width="250" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="路径" width="250" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限等级" prop="level" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level === '一级'">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level === '二级'"
            >二级</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      //初始分页条件
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 9,
        count: 0,
      },
      // 保存请求回来的用户列表数据
      rightsData: [
        {
          name: "学校管理",
          level: "一级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
        {
          name: "编辑热门院校",
          level: "二级",
        },
      ],
    };
  },
  methods: {
    // 表格表头
    headClass() {
      //表头居中显示
      return "color:rgba(255,101,0);font-weight:bold;font-size:16px";
    },
    getPermissionList() {
      this.$axios.get("/back/permissions").then((res) => {
        this.rightsData = res.data;
      });
    },
  },
  created() {
    this.getPermissionList();
  },
};
</script>

<style scoped>
.box-card {
  position: relative;
  margin: 22px auto;
  min-height: 20vh;
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}

.box-card::-webkit-scrollbar {
  display: none;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.search {
  margin-top: 20px;
  margin-left: 40px;
  /* position: absolute; */
  /* right: 80px;
  top: 6px; */
}

.el-table {
  margin-top: 20px;
}

.el-dialog .el-dialog__body {
  padding: 10px 20px;
}

.el-form-item {
  margin-bottom: 10px;
}

.pagination {
  /* border: 1px solid red; */
  position: absolute;
  bottom: 20px;
  width: 412px;
  margin: 5px auto;
  /* height: 30px; */
  left: 50%;
  margin-left: -206px;
}
</style>